<template>
  <div class="course-list flex flex-col sm:flex-row dark:bg-regal-dark w-full">
    <div class="w-full ml-0 sm:ml-2 mt-2 sm:mt-0 mb-6">
      <div class="config-main pl-5 pb-5">
        <div class="pt-5 pl-2">
          基础配置
        </div>
        <div class="mt-6">
          <el-form :label-width="200">
            <el-form-item label="用户最多可预约天数">
              <el-input-number v-model="value1" :min="1" :max="10" label="天"></el-input-number>
            </el-form-item>
            <el-form-item label="用户在课程开始">
              <el-input-number v-model="value1" :min="1" :max="10" label="天" class="mr-3.5"></el-input-number> 分钟前可取消预约
            </el-form-item>
            <el-form-item label="默认上课时间">
              <div class="flex flex-wrap">
                <el-input class="mr-4 mb-3" v-for="item in 8" style="width: 100px" disabled placeholder="7:00~7:30"></el-input>
                <span class="link">编辑</span>
              </div>
            </el-form-item>

          </el-form>
        </div>
        <div class="footer">
          <div class="flex  items-center">
            <el-button type="primary"><Icon name="plus" className="w-3 h-4 mr-1" /> 保存</el-button>
            <el-button ><Icon name="plus" className="w-3 h-4 mr-1" /> 取消</el-button>
          </div>
        </div>
      </div>
      <div class="config-main pl-5 pb-5 mt-6">
        <div class="pt-5 pl-2">
          学科配置
        </div>
        <div class="mt-6">
          <div class="pt-5 pl-2 flex">
            <el-input class="mr-3" style="width: 300px"></el-input>
            <el-button type="primary" link @click="visible = true"><Icon name="plus" className="w-4 h-4 mr-1" /> 添加年级</el-button>
          </div>
        </div>
        <el-table
            :data="tableData"
            class="mt-3 mb-6"
            style="width: 100%"
        >
          <el-table-column
              prop="value"
              label="年级"
          ></el-table-column>
          <el-table-column
              prop="value1"
              label="课程"
          ></el-table-column>
          <el-table-column
              prop="value2"
              label="课时"
          ></el-table-column>
          <el-table-column
              prop="value3"
              label="操作"
          ></el-table-column>
        </el-table>
        <div class="footer">
          <div class="flex  items-center">
            <el-button type="primary"><Icon name="plus" className="w-3 h-4 mr-1" /> 保存</el-button>
            <el-button ><Icon name="plus" className="w-3 h-4 mr-1" /> 取消</el-button>
          </div>
        </div>
      </div>
      <div class="config-main pl-5 pb-5 mt-6">
        <div class="pt-5 pl-2">
          营销配置
        </div>
        <div class="mt-6">
          <el-form :label-width="200">
            <el-form-item label="首页banner图">

              <el-upload
                  v-model:file-list="fileList"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>


            </el-form-item>
            <el-form-item label="关于我们描述">
              <el-input class="w-1/2" type="textarea" placeholder="请输入"></el-input>
            </el-form-item>

          </el-form>
        </div>
        <div class="footer">
          <div class="flex  items-center">
            <el-button type="primary"><Icon name="plus" className="w-3 h-4 mr-1" /> 保存</el-button>
            <el-button ><Icon name="plus" className="w-3 h-4 mr-1" /> 取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useGetList } from '/admin/composables/curd/useGetList'
const api = 'course'
const { data, query, search, reset, loading } = useGetList(api)
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'plant-1.png',
    url: '/images/plant-1.png',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'plant-2.png',
    url: '/images/plant-2.png',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'figure-1.png',
    url: '/images/figure-1.png',
  },
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'figure-2.png',
    url: '/images/figure-2.png',
  },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const tableData = [
  {
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },
  {
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },{
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },{
    value1: '111',
    value2: '222',
    value3: '333',
    value4: '444',
    value5: '555',
    value6: '666',
    value7: '777',
  },
]
const visible = ref(false)
const value1 = ref('')
const checkedCities = ref(['2024-03-11', '2024-03-12'])
const cities = ['2024-03-11', '2024-03-12', '2024-03-13', '2024-03-14', '2024-03-15', '2024-03-16', '2024-03-17']
const checkAll = ref(false)
const isIndeterminate = ref(false)
const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}

</script>

<style scoped lang="scss">
.course-list {
  height: calc(100vh - 120px);
}
.table-default {
  height: calc(100% - 180px);
}
.config-main {
  background: #fff;
  border-radius: 8px;
}
.edit-dialog {
  padding: 36px;
}
</style>
